<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas练习</title>
    <style>
        #mycanvas{
            border: 2px solid red;
            margin: 0 auto;
        }
    </style>
</head>
<body onload="clock()">
<canvas id="canvas" width="500" height="500"></canvas>
<canvas id="mycanvas" width="700" height="500"></canvas>
<script>
    /*function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        // 画背景
        ctx.fillStyle = '#FD0';
        ctx.fillRect(0,0,75,75);
        ctx.fillStyle = '#6C0';
        ctx.fillRect(75,0,75,75);
        ctx.fillStyle = '#09F';
        ctx.fillRect(0,75,75,75);
        ctx.fillStyle = '#F30';
        ctx.fillRect(75,75,75,75);
        ctx.fillStyle = '#FFF';

        // 设置透明度值
        ctx.globalAlpha = 0.3;

        // 画半透明圆
//        for (var i=0;i<7;i++){
//            ctx.beginPath();
//            ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
//            ctx.fill();
//        }
        var i=0;
        setInterval(function () {
            i++;

            if(i<7){
                ctx.beginPath();
                ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
                ctx.fill();
            }else{
                i=0;
                ctx.beginPath();
                ctx.arc(75,75,0,0,Math.PI*2,true);
                ctx.fill();
                ctx.fillStyle = '#FD0';
                ctx.fillRect(0,0,75,75);
                ctx.fillStyle = '#6C0';
                ctx.fillRect(75,0,75,75);
                ctx.fillStyle = '#09F';
                ctx.fillRect(0,75,75,75);
                ctx.fillStyle = '#F30';
                ctx.fillRect(75,75,75,75);
                ctx.fillStyle = '#FFF';
            }

        },100)
    }*/



   /*function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');

        //创建新 image 对象，用作图案
        var img = new Image();
        img.src = '5iweb2015120601/img/stopVid.png';
        img.onload = function(){
            // 创建图案
            var ptrn = ctx.createPattern(img,'repeat');
            ctx.fillStyle = ptrn;
            ctx.fillRect(0,0,450,850);

        }
    }*/


   /* var sun = new Image();
    var moon = new Image();
    var earth = new Image();
    function init(){
        sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
        moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
        earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
        window.requestAnimationFrame(draw);
    }

    function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');

        ctx.globalCompositeOperation = 'destination-over';
        ctx.clearRect(0,0,500,500); // clear canvas

        ctx.fillStyle = 'rgba(0,0,0,.1)';
        ctx.strokeStyle = 'rgba(0,153,255,0.4)';
        ctx.save();
        ctx.translate(250,250);

        // Earth
        var time = new Date();
        ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
        ctx.translate(105,0);
        ctx.fillRect(0,-12,50,24); // Shadow
        ctx.drawImage(earth,-12,-12);

       // Moon
        ctx.save();
        ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
        ctx.translate(0,28.5);
        ctx.drawImage(moon,-3.5,-3.5);
        ctx.restore();

        ctx.restore();
        ctx.beginPath();
        ctx.arc(250,250,105,0,Math.PI*2,true); // Earth orbit
        ctx.stroke();

        ctx.drawImage(sun,0,0,500,500);

        window.requestAnimationFrame(draw);
    }

    init();
*/


   /* function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillRect(0,0,150,150);
        ctx.translate(75,75);

        // Create a circular clipping path
        ctx.beginPath();
        ctx.arc(0,0,60,0,Math.PI*2,true);
        ctx.clip();

        // draw background
        var lingrad = ctx.createLinearGradient(0,-75,0,75);
        lingrad.addColorStop(0, '#232256');
        lingrad.addColorStop(1, '#143778');

        ctx.fillStyle = lingrad;
        ctx.fillRect(-75,-75,150,150);

        // draw stars
        for (var j=1;j<50;j++){
            ctx.save();
            ctx.fillStyle = '#fff';
            ctx.translate(75-Math.floor(Math.random()*150),
                    75-Math.floor(Math.random()*150));
            drawStar(ctx,Math.floor(Math.random()*4)+2);
            ctx.restore();
        }

    }
    function drawStar(ctx,r){
        ctx.save();
        ctx.beginPath()
        ctx.moveTo(r,0);
        for (var i=0;i<9;i++){
            ctx.rotate(Math.PI/5);
            if(i%2 == 0) {
                ctx.lineTo((r/0.525731)*0.200811,0);
            } else {
                ctx.lineTo(r,0);
            }
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }*/



    function clock(){
        var now = new Date();
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.save();
        ctx.clearRect(0,0,150,150);
        ctx.translate(75,75);
        ctx.scale(0.4,0.4);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "black";
        ctx.fillStyle = "white";
        ctx.lineWidth = 8;
        ctx.lineCap = "round";

        // Hour marks
        ctx.save();
        for (var i=0;i<12;i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/6);
            ctx.moveTo(100,0);
            ctx.lineTo(120,0);
            ctx.stroke();
        }
        ctx.restore();

        // Minute marks
        ctx.save();
        ctx.lineWidth = 5;
        for (i=0;i<60;i++){
            if (i%5!=0) {
                ctx.beginPath();
                ctx.moveTo(117,0);
                ctx.lineTo(120,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);
        }
        ctx.restore();

        var sec = now.getSeconds();
        var min = now.getMinutes();
        var hr  = now.getHours();
        hr = hr>=12 ? hr-12 : hr;
        ctx.fillStyle = "black";

        // write Hours
        ctx.save();
        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
        ctx.lineWidth = 14;
        ctx.beginPath();
        ctx.moveTo(-20,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();

        // write Minutes
        ctx.save();
        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec );
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(-28,0);
        ctx.lineTo(112,0);
        ctx.stroke();
        ctx.restore();

        // Write seconds
        ctx.save();
        ctx.rotate(sec * Math.PI/30);
        ctx.strokeStyle = "#D40000";
        ctx.fillStyle = "#D40000";
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(-30,0);
        ctx.lineTo(83,0);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0,0,10,0,Math.PI*2,true);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(95,0,20,0,Math.PI*2,true);
        ctx.stroke();
        ctx.fillStyle = "rgba(0,0,0,0)";
        ctx.arc(0,0,3,0,Math.PI*2,true);
        ctx.fill();
        ctx.restore();

        ctx.beginPath();
        ctx.lineWidth = 14;
        ctx.strokeStyle = '#325FA2';
        ctx.arc(0,0,142,0,Math.PI*2,true);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }

    window.requestAnimationFrame(clock);

</script>
<script>
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mycanvas');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    //ctx.save();
    ctx.translate(30 , 20);
    // 创建线性渐变
    lg = ctx.createLinearGradient(0 , 0 , 160 , 80);
    // 向线性渐变上添加颜色
    lg.addColorStop(0.2 , "#f00");
    lg.addColorStop(0.5 , "#0f0");
    lg.addColorStop(0.9 , "#00f");
    // 设置使用线性渐变作为填充颜色
    ctx.fillStyle = lg;
    // 填充一个矩形
    ctx.fillRect(0 , 0 , 160 , 80);


    // 恢复坐标系统
    ctx.restore();
    // 平移坐标系统
    ctx.translate(280 , 160);
    ctx.beginPath();
    // 添加圆弧
    ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
    ctx.closePath();
    ctx.lineWidth = 12;
    // 再次创建线性渐变
    lg2 = ctx.createRadialGradient(75,50,5,90,60,100);
    // 向线性渐变上添加颜色
    lg2.addColorStop(0.1 , "red");
    lg2.addColorStop(0.3 , "yellow");
    lg2.addColorStop(0.8 , "pink");
    // 设置使用线性渐变作为边框颜色
    ctx.fillStyle = lg2;
    ctx.shadowColor = 'rgba(0,0,0,.3)';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.globalAlpha = 0.6; // 0 到 1
    ctx.fill();


    var imageObj = new Image();
    imageObj.onload = function() {
        ctx.drawImage(imageObj, 120, 0, 200, 200, 50, 100, 300, 120);
    };


    imageObj.src = 'btn.gif';
</script>
</body>
</html>